<template>
	<view class="my-account">
		<!--账户信息面板-->
		<view class="header wallet-bg">
			<view class="account">
				<view class="assets">
					<view>总资产</view>
					<view class="total-money">{{wallet.balance}}109.0</view>
				</view>
				<text @tap="navTo('/pages/wallet/recharge')" class="recharge text-black">充值</text
				>
			</view>
			<view class="cumulative">
				<view class="cumulative-item">
					<view>累计充值</view>
					<view class="money">￥ {{wallet.cz||0}}</view>
				</view>
				<view class="cumulative-item1"></view>
				<view class="cumulative-item">
					<view>累计提现</view>
					<view class="money">￥ {{wallet.tx||0}}</view>
				</view>
			</view>
		</view>
		<!--余额/积分导航-->
		<view class="nav">
			<view
				class="item"
				v-for="item in navList"
				:key="item.title"
				@tap="navTo(item.url)"
			>
				<text class="iconfont" :class="[item.icon, 'text-black']"></text>
				<text>{{ item.title }}</text>
			</view>
		</view>
		<view class="cz-list">
			<view class="mark" v-if="list.length>0">备注：长按失败记录可查看提现失败原因</view>
			<view class="u-flex item" v-for="t in list" :key="t.id" @longtap="showNote(t)">
				<view class="number">￥{{t.number}}</view>
				<view class="status">{{t.text}}</view>
				<view class="time">{{t.addTime}}</view>
			</view>
			<u-loadmore :status="loadingType" bgColor="#fafafa" marginTop="30"></u-loadmore>
		</view>
		<u-modal v-model="show" title="失败原因" :content="content"></u-modal>
	</view>
</template>
<script>

export default {
	data() {
		return {
			wallet: {},
			loadingType:"loadmore",
			show:false,
			content:"",
			navList: [
				{
					title: '收益记录',
					icon: 'icon-shouyi',
					url: '/pages/wallet/detail?type=1'
				},
				{
					title: '充值记录',
					icon: 'icon-yuemingxi',
					url: '/pages/wallet/detail?type=2'
				},
				{
					title: '支出记录',
					icon: 'icon-tixianjilutubiao-',
					url: '/pages/wallet/detail?type=0'
				},
				{
					title: '立即提现',
					icon: 'icon-tixian2',
					url: '/pages/wallet/tx'
				}
			],
			list:[],
			page:1,
			limit:10
		};
	},
	onLoad() {
		this.initData();
		this.loadMore();
	},
	onReachBottom() {
		this.loadMore();
	},
	methods: {
		// 初始化数据
		initData() {
			this.$request.post("/balance/getData", {
				dataType: 'json',
				responseType: 'text'
			})
			.then(res => {
				this.wallet = res.data.json;
			})
		},
		// 获取用户信息
		async loadMore() {
			if(this.loadingType === 'loading'||this.loadingType === 'nomore'){
				//防止重复加载
				return;
			}
			await this.$request.post("/tx/list", {
				data:{
					page:this.page,
					limit:this.limit
				},
				dataType: 'json',
				responseType: 'text'
			})
			.then(res => {
				if(res.data.json&&res.data.json.length>0){
					this.list = this.list.concat(res.data.json);
					this.page++;
					this.loadingType = res.data.json.length>=this.limit?'loadmore':"nomore";
				}else {
					this.loadingType = 'nomore';
				}
			})
		},
		showNote(target){
			if(target.status==3){
				this.content = target.note;
				this.show = true;
			}
		},
		navTo(url) {
			uni.navigateTo({
				url
			})
		}
	}
};
</script>
<style scoped lang="scss">
page {
	background-color: #fafafa;
}
.my-account {
	background-color: #fafafa;
	/*  #ifndef H5  */
	height: 100vh;
	/*  #endif  */
	padding: 32upx 20upx;
	width: 100%;
	.header {
		padding: 30upx;
		height: 320upx;
		opacity: 0.9;
		border-radius: 20upx;
		color: rgba(255, 255, 255, 0.6);
		font-size: $font-sm;
		position: relative;
		.account {
			width: calc(100% - 60upx);
			display: flex;
			position: absolute;
			z-index: 2;
			justify-content: space-between;
			.assets {
				color: #fff;
				font-size: 26rpx;
				.total-money {
					font-size: 70rpx;
					margin-top: 10rpx;
					font-weight: bold;
				}
			}
			.recharge {
				font-size: $font-base;
				width: 120upx;
				height: 54upx;
				line-height: 54upx;
				border-radius: $font-base;
				background-color: #fff9f8;
				text-align: center;
				margin-top: 10upx;
			}
		}
		.cumulative {
			position: absolute;
			bottom: 20upx;
			left: 40upx;
			right: 40upx;
			display: flex;
			justify-content: space-between;
			&-item{
				flex: 1;
				color: #fff;
				font-size: 26rpx;
			}
			&-item1{
				width: 1px;
				background-color: #f9db92;
				margin: 10rpx 50rpx;
			}
			.money {
				color: #fff;
				font-size: $font-lg + 4upx;
				margin: 0;
				margin-top: 10rpx;
				font-weight: normal;
			}
		}
		.header-bg {
			position: absolute;
			width: 100%;
			height: 320upx;
			z-index: 1;
			top: 0;
			image {
				width: 100%;
				height: 320upx;
			}
		}
	}
	.nav {
		border-bottom: 1px solid #f5f5f5;
		display: flex;
		.item {
			flex: 1;
			margin: 20upx;
			font-size: $font-base - 4upx;
			display: inline-block;
			text-align: center;
			color: #999;
			.iconfont {
				display: block;
				margin: 0 auto;
				font-size: $font-lg + 20upx;
			}
		}
	}
}
.wallet-bg {
	color: #ffffff;
	background-color: #fbc855;
	background-image: linear-gradient(141deg,#f9a551 0%,#fabc54 55%,#fbc855 75%);
}
.text-black,
.line-black,
.lines-black {
	color: #333333;
}
.text-black{
	font-size: 26rpx !important;
}
.cz-list{
	padding: 30rpx;
	padding-top: 0;
	.item{
		padding: 20rpx;
		background-color: #FFFFFF;
		border-radius: 14rpx;
		margin-top: 30rpx;
	}
	.number{
		flex: 1;
		color: #333333;
	}
	.status{
		flex: 1;
		color: #9e3939;
	}
	.time{
		color: #999797;
	}
}
.mark{
	font-size: 26rpx;
	margin-top: 30rpx;
	color: #7c7777;
}
</style>
